<template>
	<button
		:class="['v-text-button', { 'v-text-button--disabled': disabled, 'v-text-button--loading': loading }, ` v-text-button--${type}`, `v-text-button--${size}`]"
		:disabled="disabled || loading"
		@click="handleClick"
	>
		<span v-if="loading" class="loading-text">{{ loadingText }}</span>
		<span v-else>
			<slot>{{ text }}</slot>
		</span>
	</button>
</template>

<script setup lang="ts">
import { ref, inject } from 'vue';


const props = defineProps({
	type: {
		type: String,
		default: 'default'
	},
	size: {
		type: String,
		default: 'medium',
		validator: (value: string) => ['small', 'medium', 'large'].includes(value)
	},
	text: {
		type: String,
		default: '',
		required: true
	},
	disabled: {
		type: Boolean,
		default: false
	},
	loading: {
		type: Boolean,
		default: false
	},
	loadingText: {
		type: String,
		default: '加载中...'
	}
});

const emit = defineEmits(['click']);
const config = inject<any>('config');

const handleClick = (event: MouseEvent) => {
	if (!props.disabled && !props.loading) {
		emit('click', event);
	}
};
</script>

<style lang="scss" scoped>
.v-text-button {
	border: none;
	background-color: transparent;
	cursor: pointer;
	transition: all 0.3s;

	&:hover {
		opacity: 0.9;
		text-decoration: underline;
	}

	&:active {
		opacity: 0.8;
	}

	&--default {
		color: v-bind("config.fontColor.default");
	}

	&--delete {
		color: v-bind("config.fontColor.delete");
	}

	&--succeed {
		color: v-bind("config.fontColor.succeed");
	}

	&--info {
		color: v-bind("config.fontColor.info");
	}

	&--warn {
		color: v-bind("config.fontColor.warn");
	}

	&--small {
		font-size: v-bind("config.fontSize.smallText");
	}

	&--medium {
		font-size: v-bind("config.fontSize.mediumText");
	}

	&--large {
		font-size: v-bind("config.fontSize.largeText");
	}

	&--disabled,
	&[disabled] {
		opacity: v-bind("config.opacity.disabled");
		cursor: not-allowed;
	}

	&--loading {
		color: #287afa;
		cursor: wait;
	}

	.loading-text {
		animation: loadingDots 1.5s infinite;
	}

	@keyframes loadingDots {
		0% {
			opacity: 1;
		}
		50% {
			opacity: 0.5;
		}
		100% {
			opacity: 1;
		}
	}
}
uni-button:after {
	border: none;
}
uni-button[disabled][type='default'],
uni-button[disabled]:not([type]) {
	background-color: transparent;
}
</style>
